<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="../vue.js">

    </script>


<div class="app">
<my-cpn1></my-cpn1>
<hgt></hgt>
<hgt1></hgt1>
<hgt2></hgt2>
<hgt3></hgt3>
<hgt4></hgt4>

</div>
    
<!--//注册组件模板分离   模板定义在标签中跟js代码分离-->
<!--使用script实现  注册组件的时候模板分离  少用-->
<script type="text/x-template" id="myCpn">
<div>
    <h2>组件标题</h2>
    <p>组件中的一个段落内容</p>
</div>
</script>

<!--使用template标签注册组件-->

<template id="hgt5">
    <div>
        <h2>组件标题</h2>
        <p>组件中的一个段落</p>
    </div>
</template>



<script>

    //注册组件语法糖

    Vue.component('hgt',{
        template:
        `
        <div>
            <h1>语法糖</h1>
            </div>
        `
    })


    const childtest = Vue.extend({
        template:
        `
        <div>
            <h1>子组件</h1>
            </div>

        `
    })

    const test = Vue.extend({
        template:
        `
        <div>
            <h1>测试</h1>
            
            <childtest></childtest>
            </div>

        `,
        components: {
            childtest
        }
    }
    );


    const aa = new new Vue({
      el: ".app" ,
      components: {
        "my-cpn1": test
    },
    components:{
        'hgt3':{
            template:'#myCpn'
        }
        ,
        'hgt1':{
            template:
            `
            <div>
                <h1>语法糖2</h1>
                </div>
            `
        },
        'hgt2':{
            template:
            `
            <div>
                <h1>语法糖3</h1>
                </div>
            `
        },
        'hgt4':{
            template:'#hgt5'
        }
    }
    })

</script>







</body>
</html>